<template>
  <!-- 流动团员 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData ref="searchData" :searchData="searchArr" @search="search"></searchData>
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title"></title-name> -->
      <a-alert class="mb12" type="info" show-icon>
        <template slot="message">
          共计<a
            >&nbsp;<b>{{ total }}</b></a
          >&nbsp;个</template
        >
      </a-alert>
      <!-- 表格 -->
      <list-table
        ref="table"
        tableLayout="fixed"
        size="default"
        rowKey="id"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :pageKeys="['pageNum', 'pageSize','total']"
      >
        <template slot="actions" slot-scope="text, record">
          <a @click="handleOpen(record)">对内转入</a>
        </template>
      </list-table>
    </a-card>
    <!-- 表单弹窗 -->
    <DialogForm
      ref="dialogForm"
      :visible.sync="visible"
      editModel="E"
      :form="form"
      :forms.sync="forms"
      headerTitle="对内转入"
      :width="1000"
      :rules="rules"
      :formList="formList"
      @confirm="submitForm"
      @selectNode="handleChange"
    />
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { getList, inwardTransfer } from '@/api/partyMasses/partyManage/mobileMember' // api
import DialogForm from '@/components/DialogForm' // 弹窗
import YouthTreeSelect from '@/views/partyMasses/componments/youthTreeSelect.vue'
import BasePage from '@/views/basePage' // 基础配置

const searchArr = [
  // 搜索框
  {
    name: '团员名称',
    type: 'input',
    value: 'youthMemberName'
  },
  {
    name: '撤销团支部',
    type: 'input',
    value: 'youthOrgName'
  }
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '团员名称',
    ellipsis: true,
    dataIndex: 'youthMemberName'
  },
  {
    title: '之前所在团支部',
    ellipsis: true,
    dataIndex: 'youthOrgName'
  },
  {
    title: '团支部撤销时间',
    ellipsis: true,
    dataIndex: 'undoTime'
  },
  {
    title: '员工编号',
    ellipsis: true,
    dataIndex: 'employeeNum'
  },
  {
    title: '手机号码',
    ellipsis: true,
    dataIndex: 'phone'
  },
  {
    title: '当前岗位',
    ellipsis: true,
    dataIndex: 'currentPost'
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '130px',
    align: 'center',
    scopedSlots: { customRender: 'actions' }
  }
]
export default {
  name:'a'+ Date.now(),
  extends: new BasePage(),
  components: {
    STable,
    DialogForm
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      queryParam: {}, // 查询参数
      total: 0, // 总计
      forms:{}, // 弹窗实际表单
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return getList(requestParameters).then((res) => {
          // 映射总计
          res.data.code = 200;
          res.data.total && (this.total = res.data.total)
          return {
          code:200,
          data: res.data,
          currentPage: res?.currentPage,
          total: res?.data.total
        }
        })
      }, // 加载数据方法 必须为 Promise 对象
      form: {}, // 弹窗表单
      visible: false, // 弹窗控件
      rules: {
        youthOrgId: [{ required: true, message: '请选择转入团支部', trigger: 'change' }]
      }, // 校验规则
      post: {} //当前岗位
    }
  },
  computed: {
    // 弹窗表单
    formList() {
      return [
        {
          keyName: 'youthMemberName',
          type: 'BaseInput',
          label: '团员名称',
          disabled: true,
          span: 12
        },
        {
          label: '转入团支部',
          keyName: 'youthOrgId',
          type: YouthTreeSelect,
          span: 12,
          attrs: {
            onlySelectTypes: [3]
          }
        },
        {
          keyName: 'remark',
          type: 'BaseTextarea',
          label: '备注说明',
          span: 24
        }
      ]
    }
  },
  mounted() {
    // 获取当前岗位
    this.post = this.$currentPost()
  },
  methods: {
    /**
     * 映射转入团支部
     */
    handleChange() {
      this.forms.youthOrgId = arguments[1]?.id
    },
    /**
     * 填写对内转入信息
     */
    handleOpen(record) {
      this.form = {
        youthMemberName: record.youthMemberName,
        id: record.id,
        userId: record.userId,
        youthMemberId: record.youthMemberId,
        youthOrgId: void 0
      }
      this.visible = true
    },
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    /**
     * 提交对内转入表单
     */
    submitForm(e) {
      this.$refs.dialogForm.loading = true
      inwardTransfer(e)
        .then(() => {
          this.$refs.dialogForm.loading = false
          this.$message.success('转入成功！')
          this.$refs.table.loadData()
          this.visible = false
        })
        .catch(() => {
          // that.$message.warning(['保存', '提交'][statusCode] + '失败！')
          this.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>
